

<template>
  <!-- pages/logistics-info/logistics-info.wxml -->
  <!-- 物流信息 -->
  <view class="Mall4j logistics-page">
    <view v-if="deliveryList.length" class="logistics-box">
      <!-- nav -->
      <view :class="'package-list ' + (deliveryList.length>=5?'package-overlength':'package-list-flex')">
        <block v-for="(item, index) in deliveryList" :key="index">
          <view class="package-item" :data-sts="index" @tap="navChange">
            <view :class="'nav-txt ' + (isCurrent == index?'active':'')">{{ i18n.package }}{{ index+1 }}</view>
          </view>
        </block>
      </view>
      <!-- 包裹信息 -->
      <view :class="['package-info',{ mt100: (deliveryList.length>1) }]">
        <view style="height: 20rpx;"></view>
        <view class="package-prod">
          <!-- 单个包裹 -->
          <view v-if="deliveryList[isCurrent].orderItems.length == 1" class="single-package">
            <view class="prod-pic">
              <image v-if="deliveryList[isCurrent].orderItems[0].pic" :src="deliveryList[isCurrent].orderItems[0].pic ? deliveryList[isCurrent].orderItems[0].pic : 'https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png'" class="prod-pic" />
              <image v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" mode="aspectFit" />
              <view class="quantity">×{{ deliveryList[isCurrent].orderItems[0].prodCount }}</view>
            </view>
            <view v-if="deliveryList[isCurrent].deliveryType !== 3" class="prod-con">
              <!-- 物流状态 1已揽收 2运输途中 3已签收 4问题件 201达到目的城市 -1删除 -->
              <view v-if="deliveryList[isCurrent].status != -1" class="prod-status">{{ ['',i18n.alreadyReceived,i18n.inTransit,i18n.signedInReceived,i18n.questionableDelivery,i18n.arriveDestinationCity][deliveryList[isCurrent].status] }}</view>
              <view v-if="deliveryList[isCurrent].status == -1" class="prod-status">{{ i18n.delete }}</view>
              <view class="prod-carrier">{{ i18n.carriageSource }}：{{ deliveryInfo.deliveryDto.companyName || '' }}</view>
              <view class="carrier">
                <text class="waybill-num ">{{ i18n.waybillNumber }}：{{ deliveryInfo.deliveryDto.dvyFlowId || '' }}</text>
                <text class="copy-btn" @tap="copyBtn">{{ i18n.copy }}</text>
              </view>
            </view>
            <view v-if="deliveryList[isCurrent].deliveryType === 3" class="prod-con">
              <view class="prod-carrier" style="max-width: 100%;">{{ i18n.shippingMethod }}: {{ i18n.noCourier }}</view>
            </view>
          </view>
          <!-- 多个包裹 -->
          <view v-if="deliveryList[isCurrent].orderItems.length > 1" class="multiple-package">
            <view v-if="deliveryList[isCurrent].deliveryType !== 3" class="prod-con">
              <view v-if="deliveryList[isCurrent].status != -1" class="prod-status">{{ ['',i18n.alreadyReceived,i18n.inTransit,i18n.signedInReceived,i18n.questionableDelivery,i18n.arriveDestinationCity][deliveryList[isCurrent].status] }}</view>
              <view v-if="deliveryList[isCurrent].status == -1" class="prod-status">{{ i18n.delete }}</view>
              <view class="prod-carrier">{{ i18n.carriageSource }}： {{ deliveryInfo.deliveryDto.companyName || '' }}</view>
              <view class="carrier">
                <text class="waybill-num clamp_text">{{ i18n.waybillNumber }}：{{ deliveryInfo.deliveryDto.dvyFlowId || '' }}</text>
                <text class="copy-btn" @tap="copyBtn">{{ i18n.copy }}</text>
              </view>
            </view>
            <view v-if="deliveryList[isCurrent].deliveryType === 3" class="prod-con">
              <view class="prod-carrier" style="max-width: 100%;">{{ i18n.shippingMethod }}: {{ i18n.noCourier }}</view>
            </view>
            <view class="prod-item">
              <block v-for="(prod, index) in deliveryList[isCurrent].orderItems" :key="index">
                <view class="prod-item-pic">
                  <image v-if="prod.pic" :src="prod.pic ? prod.pic : 'https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png'" class="prod-pic" />
                  <image v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" mode="aspectFit" />
                  <view class="quantity">×{{ prod.prodCount }}</view>
                </view>
              </block>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 物流信息 -->
    <view v-if="deliveryInfo.deliveryDto" class="logistics-info">
      <view v-if="deliveryInfo.deliveryDto && deliveryInfo.deliveryDto.traces.length" class="logistics-box">
        <view class="logistics">
          <block v-for="(tracesItem, index) in deliveryInfo.deliveryDto.traces" :key="index">
            <view class="item">
              <view class="time">{{ tracesItem.acceptTime }}</view>
              <view class="des">{{ tracesItem.acceptStation }}</view>
            </view>
          </block>
        </view>
      </view>
      <!-- 物流信息为空 -->
      <view v-if="deliveryInfo.deliveryDto && !deliveryInfo.deliveryDto.traces.length" class="logistics-info-empty">{{ i18n.noDeliveryInformation }}</view>
    </view>
    <!-- 包裹信息为空 -->
    <view v-if="!deliveryList.length" class="expresses-empty">{{ i18n.noPackageTips }}</view>
  </view>
</template>

<script>
// pages/logistics-info/logistics-info.js
var http = require('../../utils/http.js')
import uniCopy from '@/js_sdk/copy/uni-copy.js'

export default {

  components: {},
  props: {},
  data () {
    return {
      // 运单编号
      orderNumber: '',
      // 当前nav
      isCurrent: 0,
      // 包裹集合信息
      deliveryList: [],
      // 展示的物流详情
      deliveryInfo: {}
    }
  },

  computed: {
    i18n () {
      return this.$t('index')
    }
  },

  /**
     * 生命周期函数--监听页面加载
     */
  onLoad: function (options) {
    var params = {
      url: '/p/myDelivery/orderInfo/' + options.orderNumber,
      method: 'GET',
      callBack: res => {
        this.deliveryList = res
        this.deliveryInfo = res[0]
      }
    }
    http.request(params)
  },

  /**
     * 生命周期函数--监听页面初次渲染完成
     */
  onReady: function () { },

  /**
     * 生命周期函数--监听页面显示
     */
  onShow: function () {
    // 头部导航标题
    uni.setNavigationBarTitle({
      title: this.i18n.logisticsDetails
    })
  },

  /**
     * 生命周期函数--监听页面隐藏
     */
  onHide: function () { },

  /**
     * 生命周期函数--监听页面卸载
     */
  onUnload: function () { },

  /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
  onPullDownRefresh: function () { },

  /**
     * 页面上拉触底事件的处理函数
     */
  onReachBottom: function () { },

  /**
     * 用户点击右上角分享
     */
  onShareAppMessage: function () { },
  methods: {
    /**
       * 获取指定包裹的物流信息
       */
    getDeliveryDtoById () {
      const params = {
        url: '/p/myDelivery/deliveryOrder/' + this.deliveryList[this.isCurrent].orderDeliveryId,
        method: 'GET',
        callBack: res => {
          this.deliveryInfo = res
        },
        errCallBack: errMsg => {
          console.log(errMsg)
        }
      }
      http.request(params)
    },

    /**
       * nav切换
       */
    navChange: function (e) {
      // console.log(e)
      const sts = e.currentTarget.dataset.sts
      this.setData({
        isCurrent: sts
      })
      this.getDeliveryDtoById()
    },
    // 一键复制事件
    copyBtn: function () {
      uniCopy({
        content: this.deliveryList[this.isCurrent].dvyFlowId,
        success: (res) => {
          uni.showToast({
            title: res,
            icon: 'none'
          })
        },
        error: (e) => {
          uni.showToast({
            title: e,
            icon: 'none',
            duration: 3000
          })
        }
      })
    }
  }
}
</script>
<style scoped lang='scss'>
@import "./logistics-info.css";
</style>
